<template>
  <div class="catalog-detail-panel">
    <transition name="slide-left" mode="out-in" appear>
      <div class="panel" v-show="visible">
        <div class="header">
          <div
            class="title"
            :title="
              currentSelectedNode ? currentSelectedNode?.name : '数据详情'
            "
          >
            {{ currentSelectedNode ? currentSelectedNode?.name : '数据详情' }}
          </div>
          <div class="close-btn" @click="handleClose">
            <svg-icon icon-class="关闭" />
          </div>
        </div>

        <div class="content">
          <edit-form
            v-if="isEditing"
            :editing-item="editingItem"
            :city-options="cityOptions"
            :status-options="statusOptions"
            :detail-mode="isDetailMode"
            :templateId="currentSelectedNode?.templateId || currentSelectedNode?.pkid"
            :type="currentSelectedNode?.type"
            @save="handleSaveForm"
            @temporarySave="handleTemporarySave"
            @cancel="handleCancel"
            @delete="handleDelete"
            @edit="handleEdit"
            ref="editFormRef"
          />

          <!-- 列表模式 -->
          <div v-else-if="!isBuildingDetailMode" class="list-container">
            <div
              class="header-actions"
            >
              <el-button
                type="primary"
                @click="handleAdd"
                v-if="currentUser?.hasPermission('yztadd') && currentSelectedNode?.type === 'zxtj'"
                >{{ currentUser?.getButtonName('yztadd') }}</el-button
              >
              <el-button
                type="default"
                @click="handleUpload"
                v-if="currentUser?.hasPermission('yztupload')"
                >{{ currentUser?.getButtonName('yztupload') }}</el-button
              >
              <el-button
                type="default"
                :loading="downloadLoading"
                @click="handleDownload"
                v-if="currentUser?.hasPermission('yztdownload')"
                >{{ currentUser?.getButtonName('yztdownload') }}</el-button
              >
            </div>
            <div class="search-box">
              <div class="select-row">
                <!-- 级联筛选-->
                <el-cascader
                  v-model="areaInfo"
                  :options="cityOptions"
                  :props="cascaderProps"
                  placeholder="区域"
                  class="select-item"
                  :show-all-levels="false"
                  @change="handleChangeArea"
                  clearable
                  filterable
                ></el-cascader>
                <el-select
                  v-model="status"
                  clearable
                  placeholder="状态"
                  class="select-item"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <el-input
                v-model="searchKeyword"
                clearable
                placeholder="请输入搜索内容"
                prefix-icon="el-icon-search"
                @keyup.enter.native="handleSearch"
              />
            </div>

            <div class="list-content">
              <div v-if="loading" class="empty-state">
                <p>加载中...</p>
              </div>
              <div v-else-if="dataList.length === 0" class="empty-state">
                <svg-icon icon-class="数据查询" />
                <p>暂无数据</p>
              </div>

              <div v-else class="data-list">
                <div v-for="item in dataList" :key="item.id" class="data-item">
                  <div class="item-content">
                    <div class="item-row">
                      <div class="item-title-desc">
                        <div
                          class="item-title"
                          :title="item.name || item.communityName"
                          :style="{
                            color: currentSelectedNode?.type === 'sq' ? '#006fff' : '#333',
                          }"
                          @click="currentSelectedNode?.type === 'sq'?handleEditOrDetail(item, true):''"
                        >
                          {{ item.name || item.communityName }}
                        </div>
                        <div class="item-desc">
                          {{ `修改时间：${item.updateTime || '-'}` }}
                        </div>
                      </div>
                      <span
                        class="item-status"
                        :style="{
                          backgroundColor: statusOptions.find(
                            (option) => option.value == item.status
                          )?.color,
                        }"
                        >{{
                          statusOptions.find(
                            (option) => option.value == item.status
                          )?.label
                        }}</span
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        v-if="
                          currentSelectedNode?.type === 'zxtj' &&
                          currentUser?.hasPermission('yztedit')
                        "
                        @click="handleEditOrDetail(item, false)"
                        >{{ currentUser?.getButtonName('yztedit') }}</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>

              <!-- 分页组件 -->
              <div v-if="showPagination" class="pagination-container">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  layout="prev, pager, next"
                  :small="true"
                  :hide-on-single-page="false"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <upload-dialog
      :visible="uploadDialogVisible"
      :isExtraTip="dataList.length > 0 ? true : false"
      :templateId="currentSelectedNode?.pkid"
      :type="currentSelectedNode?.type"
      @close="handleUploadDialogClose"
      @success="handleUploadSuccess"
    />
  </div>
</template>

<script>
import SvgIcon from '@/components/svg-icon'
import UploadDialog from './components/upload-dialog.vue'
import EditForm from './components/edit-form.vue'
import {
  queryArea,
  queryLeftList,
  queryQuestionById,
  addOrUpdateAnswer,
  deleteAnswer,
  downloadFileById,
} from '@/api/question'
import { Message } from 'element-ui'
import emitter from '@/utils/event-bus'

export default {
  name: 'CatalogDetailPanel',
  components: {
    SvgIcon,
    UploadDialog,
    EditForm,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedNode: {
      type: Object,
      default: null,
    },
    allBuildingIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const user = JSON.parse(localStorage.getItem('user')).user
    return {
      user,
      uploadDialogVisible: false,
      areaInfo: [],
      cityOptions: [],
      baseStatusOptions: [
        { label: '待完善', value: 0, color: '#909399' },
        { label: '退回', value: 1, color: '#F56C6C' },
        { label: '待审核', value: 2, color: '#E6A23C' },
        { label: '通过', value: -1, color: '#67C23A' },
      ],
      cascaderProps: {
        value: 'pkid',
        label: 'areaName',
        checkStrictly: true,
        children: 'children',
      },
      baseLevel: '0',
      params: {
        regionId: '',
        streetId: '',
        communityId: '',
        type: 'community',
        level: '',
      },
      searchKeyword: '',
      dataList: [],
      status: '',
      isEditing: false,
      editingItem: null,
      // 分页相关
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      downloadLoading: false,
      isDetailMode: false,
      isBuildingDetailMode: false, // 标记是否是从楼栋点击进来的详情模式
      internalSelectedNode: null, // 内部管理的selectedNode，避免直接修改props
      originalSelectedNode: null, // 保存原始的selectedNode，用于从楼栋详情返回时恢复
      copyAllBuildingIds: []
    }
  },
  computed: {
    showPagination() {
      return this.total > this.pageSize
    },
    currentUser() {
      return this.$store.state.user.currentUser
    },
    // 使用计算属性来管理selectedNode，优先使用内部的internalSelectedNode
    currentSelectedNode() {
      return this.internalSelectedNode || this.selectedNode
    },
    statusOptions() {
      return this.baseStatusOptions.map(option => {
        if (option.value === 2) {
          return {
            ...option,
            label: this.currentSelectedNode?.type === 'zxtj' ? '已完善' : '待审核'
          }
        }
        return option
      })
    }
  },
  watch: {
    selectedNode: {
      handler(newNode) {
        if (newNode && !this.isBuildingDetailMode) {
          this.internalSelectedNode = null // 清空内部节点
          this.isEditing = false
          this.currentPage = 1
          // 右侧el-tree点击切换时不清空筛选条件
          // this.areaInfo = []
          this.status = ''
          this.searchKeyword = ''
          this.getDataList()
        }
      },
      immediate: true,
    },
    searchKeyword() {
      this.currentPage = 1
      this.getDataList()
    },
    status() {
      this.currentPage = 1
      this.getDataList()
    },
    allBuildingIds: {
      immediate: true,
      handler(newVal) {
        this.copyAllBuildingIds = JSON.parse(JSON.stringify(newVal))
      }
    }
  },
  methods: {
    async handleDownload() {
      this.downloadLoading = true
      try {
        const response = await downloadFileById({
          templateId: this.currentSelectedNode.pkid,
        })
        const blob = new Blob([response.data], {
          type: response.headers['content-type'],
        })

        // 从 headers 中提取文件名
        let filename = 'download.zip'
        const disposition = response.headers['content-disposition']
        if (disposition) {
          const match = disposition.match(/filename="?([^"]+)"?/)
          if (match && match[1]) {
            filename = decodeURIComponent(match[1])
          }
        }

        // 创建下载链接并触发下载
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = filename
        document.body.appendChild(a)
        a.click()
        a.remove()
        window.URL.revokeObjectURL(url)
        this.$message.success('下载完成')
      } catch (error) {
        console.error(error)
        this.$message.error('下载失败，请稍后再试')
      } finally {
        this.downloadLoading = false
      }
    },
    handleChangeArea(val) {
      const currentLevel = val.length
        ? val.length + Number(this.baseLevel) - 1
        : 0 //清空的时候
      this.params.level = currentLevel.toString()
      switch (currentLevel) {
        case 0:
          this.params.regionId = val.length
            ? val[val.length - 1]
            : this.user.refId
          this.params.streetId = ''
          this.params.communityId = ''
          break
        case 1:
          this.params.regionId = ''
          this.params.streetId = val[val.length - 1]
          this.params.communityId = ''
          break
        case 2:
          this.params.regionId = ''
          this.params.streetId = ''
          this.params.communityId = val[val.length - 1]
          break
      }
      this.getDataList()
      this.$emit('change-area', this.params)
    },

    getDataList() {
      if (!this.currentSelectedNode || this.isBuildingDetailMode) return

      this.loading = true
      const params = {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        templateId: this.currentSelectedNode.pkid,
        pkid: this.currentSelectedNode.pkid,
        type: this.currentSelectedNode.templateType,
        regionId: this.params.regionId,
        streetId: this.params.streetId,
        communityId: this.params.communityId,
        status: this.status,
        name: this.searchKeyword,
      }

      queryLeftList(params)
        .then((res) => {
          if (res.success) {
            this.dataList = res.data.list || []
            this.total = res.data.count || 0
            // 刷新地图图层，这会自动加载建筑物和点位数据
            this.refreshMapLayers()
          } else {
            this.$message.error(res.message)
            this.dataList = []
            this.total = 0
          }
        })
        .catch((err) => {
          console.error('Failed to get list data:', err)
          this.$message.error('Failed to get list data')
        })
        .finally(() => {
          this.loading = false
        })
    },

    findNodeById(tree, targetId) {
      for (let i = 0; i < tree.length; i++) {
        if (tree[i].areaCode === targetId || tree[i].pkid === targetId) {
          return tree[i]
        }

        if (tree[i].children && tree[i].children.length > 0) {
          const foundNode = this.findNodeById(tree[i].children, targetId)
          if (foundNode !== undefined) {
            return foundNode
          }
        }
      }
      return undefined
    },

    removeChildrenAtLevel(tree, targetLevel) {
      for (let i = 0; i < tree.length; i++) {
        if (tree[i].level === targetLevel) {
          delete tree[i].children
        }

        if (tree[i].children && tree[i].children.length > 0) {
          this.removeChildrenAtLevel(tree[i].children, targetLevel)
        }
      }
      return tree
    },

    getCurrentLevelCityOption(data) {
      const areaCode = this.user.refId
      return this.findNodeById(data, areaCode)
    },

    getCurrentLevel() {
      const roleLevel = this.user.roleLevel
      const id = this.user.refId
      let obj = {
        regionId: '',
        streetId: '',
        communityId: '',
        type: 'community',
        level: '',
      }
      if (this.user.roleLevel === 3) {
        obj.type = 'community'
      }
      switch (roleLevel) {
        case 0:
        case 4:
        case 5:
          obj.level = '0'
          break
        case 2:
          obj.regionId = id
          obj.level = '1'
          break
        case 1:
          obj.streetId = id
          obj.level = '2'
          break
        case 3:
          obj.communityId = id
          obj.level = '3'
          break
      }
      this.baseLevel = obj.level
      this.params = obj
    },

    getCityOptionList() {
      queryArea({
        currentId: this.user.refId,
      })
        .then((res) => {
          if (res.success) {
            if (!res.data) return
            const tree = this.removeChildrenAtLevel(res.data, 3)
            const node = this.getCurrentLevelCityOption(tree)
            if (node) {
              this.cityOptions = node.children
            } else {
              this.cityOptions = []
            }
          } else {
            Message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    handleChangeParamsById(id) {
      const node = this.findNodeById(this.cityOptions, id)
      if (node) {
        if (node.parentCode === this.user.refId) {
          const codeArr = [node.parentCode, node.areaCode]
          this.handleChangeArea(codeArr)
          this.areaInfo = codeArr
        } else {
          const codeArr = ['-1', node.parentCode, node.areaCode]
          this.handleChangeArea(codeArr)
          this.areaInfo = codeArr
        }
      }
    },

    handleClose() {
      this.$emit('close')
    },

    handleSearch() {
      this.currentPage = 1
      this.getDataList()
    },

    handleCurrentChange(page) {
      this.currentPage = page
      this.getDataList()
    },

    handleEdit(item) {
      // 清除地图高亮
      this.clearMapHighlight()
      
      // 确保与 handleEditOrDetail 保持一致的状态
      this.isBuildingDetailMode = false
      this.internalSelectedNode = null // 清空内部节点，确保使用 props 中的 selectedNode
      this.handleEditOrDetail(item, false)
    },

    handleEditOrDetail(item, isDetail = false) {
      // 确保状态一致
      this.isBuildingDetailMode = false
      this.internalSelectedNode = null // 清空内部节点，确保使用 props 中的 selectedNode
      
      queryQuestionById({
        templateId: this.currentSelectedNode.pkid,
        pkid: item.pkid,
      })
        .then((res) => {
          if (res.success && res.data) {
            this.isEditing = true
            this.isDetailMode = isDetail
            this.editingItem = item

            this.$nextTick(() => {
              this.$refs.editFormRef.initForm(res.data.problems, !isDetail)
            })
            this.$emit('copy-all-building-ids', this.copyAllBuildingIds)
          } else {
            this.$message.error(res.message || '获取表单配置失败')
          }
        })
        .catch((err) => {
          this.$message.error('获取表单配置失败')
        })
    },
    handleAdd() {
      queryQuestionById({
        templateId: this.currentSelectedNode.pkid,
      })
        .then((res) => {
          if (res.success && res.data) {
            this.isDetailMode = false
            this.isEditing = true
            this.editingItem = null

            this.$nextTick(() => {
              this.$refs.editFormRef.initForm(res.data.problems)
            })
          } else {
            this.$message.error(res.message || '获取表单配置失败')
          }
        })
        .catch((err) => {
          this.$message.error('获取表单配置失败')
        })
    },

    clearMapHighlight() {
      // emitter.emit('CLEAR_SELECTED_BUILDINGS')
      emitter.emit('CLEAR_HIGHLIGHT_GEOJSON')
      emitter.emit('CLEAR_HIGHLIGHT_MARKERS')
      
      const map = emitter.getMap()
      if (map) {
        const LAYER_IDS = {
          HIGHLIGHT: 'highlight-layer'
        }
        
        // 移除高亮图层
        if (map.getLayer(LAYER_IDS.HIGHLIGHT)) {
          map.removeLayer(LAYER_IDS.HIGHLIGHT)
        }
        // 移除高亮源
        if (map.getSource(LAYER_IDS.HIGHLIGHT)) {
          map.removeSource(LAYER_IDS.HIGHLIGHT)
        }
      }
    },

    handleCancel() {
      this.clearMapHighlight()
      // 清空draw-map-tool的绘制数据
      this.clearDrawMapToolData()
      
      this.isEditing = false
      this.editingItem = null

      // 如果是从楼栋点击进来的详情模式，返回时显示列表页
      if (this.isBuildingDetailMode) {
        this.isBuildingDetailMode = false
        // 恢复原始的selectedNode作为内部节点，这样可以正确显示标题和按钮
        this.internalSelectedNode = this.originalSelectedNode
        this.originalSelectedNode = null
        // 不关闭面板，而是显示列表页
        this.getDataList()
      } else if (this.currentSelectedNode) {
        // 从普通编辑页返回时，也刷新列表以显示所有项目的点位
        this.getDataList()
      }
      this.refreshMapLayers()
    },
    handleTemporarySave(formData) {
      addOrUpdateAnswer({
        result: JSON.stringify(formData),
        templateId: this.currentSelectedNode.pkid,
        pkid: this.editingItem ? this.editingItem.pkid : '',
        businessId: this.editingItem ? this.editingItem.pkid : '',
        status: 0,
      }).then((res) => {
        if (res.success) {
          this.$message.success('保存成功！')
          // 清空draw-map-tool的绘制数据
          this.clearDrawMapToolData()
          // this.isEditing = false
          this.editingItem = null
          this.getDataList()
          this.refreshMapLayers()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    handleSaveForm(formData) {
      addOrUpdateAnswer({
        result: JSON.stringify(formData),
        templateId: this.currentSelectedNode.pkid,
        pkid: this.editingItem ? this.editingItem.pkid : '',
        businessId: this.editingItem ? this.editingItem.pkid : '',
        status: 2,
      }).then((res) => {
        if (res.success) {
          this.$message.success('保存成功！')
          // 清空draw-map-tool的绘制数据
          this.clearDrawMapToolData()
          this.clearMapHighlight()
          this.isEditing = false
          this.editingItem = null
          this.getDataList()
          this.refreshMapLayers()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    handleUpload() {
      this.uploadDialogVisible = true
    },

    handleUploadDialogClose() {
      this.uploadDialogVisible = false
      this.getDataList()
    },

    handleUploadSuccess(data) {
      console.log('Upload successful:', data)
      this.uploadDialogVisible = false
      this.getDataList()
      this.$message.success('数据导入成功！')
    },

    handleDelete() {
      deleteAnswer([
        {
          templateId: this.currentSelectedNode.pkid,
          pkid: this.editingItem.pkid,
        },
      ]).then((res) => {
        if (res.success) {
          this.$message.success('删除成功！')
          // 清空draw-map-tool的绘制数据
          this.clearDrawMapToolData()
          this.isEditing = false
          this.editingItem = null
          this.getDataList()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    refreshMapLayers() {
      // 获取数据目录中所有被 check 的节点
      let allCheckedIds = []
      
      // 通过事件总线获取数据目录的选中状态
      emitter.emit('GET_CATALOG_CHECKED_IDS', (checkedIds) => {
        allCheckedIds = checkedIds || []
      })
      
      // 如果没有获取到选中的ID，至少包含当前选中的节点
      if (allCheckedIds.length === 0 && this.currentSelectedNode && this.currentSelectedNode.pkid) {
        allCheckedIds = [this.currentSelectedNode.pkid]
      }
      
      if (allCheckedIds.length > 0) {
        emitter.emit('TOGGLE_SERVICE', {
          addIds: allCheckedIds,
          removeIds: [],
          type: 'resource'
        })
      }
    },
    
    // 重置楼栋详情模式，用于切换图层时清理状态
    resetBuildingDetailMode() {
      this.isBuildingDetailMode = false
      this.isEditing = false
      this.editingItem = null
      this.originalSelectedNode = null
      this.internalSelectedNode = null
    },

    // 直接显示楼栋详情，不显示列表页，避免闪现
    handleShowBuildingDetailDirect(templateId, pkid) {
      // if (this.currentSelectedNode?.type === 'sq') {
        queryQuestionById({
          templateId: templateId,
          pkid: pkid,
        })
          .then((res) => {
            if (res.success && res.data) {
              // 保存原始的selectedNode，用于返回时恢复
              // 如果没有原始selectedNode，创建一个默认的列表节点，使用接口返回的template_name
              this.originalSelectedNode = this.selectedNode
                ? { ...this.selectedNode }
                : {
                    pkid: templateId,
                    templateId: templateId,
                    name: res.data.template_name || '数据详情', // 使用接口返回的template_name
                    type: 'zxtj', // 设置为zxtj类型，这样返回时会显示编辑、添加、上传按钮
                    templateType: 'zxtj',
                  }

              // 如果原始selectedNode存在，也更新其名称为template_name
              if (this.selectedNode && res.data.template_name) {
                this.originalSelectedNode.name = res.data.template_name
              }
              // 设置internalSelectedNode用于显示标题，避免直接修改props
              this.internalSelectedNode = {
                pkid: templateId,
                templateId: templateId,
                name: res.data.template_name || '楼栋详情',
                type: 'building',
                templateType: 'building',
              }

              // 直接进入编辑模式，不显示列表
              this.isEditing = true
              this.isDetailMode = true
              this.isBuildingDetailMode = true // 标记这是从楼栋点击进来的
              // 创建editingItem
              // 获取行政区划的最后一个值作为名称
              let displayName = res.data.name || '楼栋详情'
              // @ts-ignore
              let isCommunity = res.data.name===null
              
              // 检查是否有行政区划数据
              if (res.data.problems && res.data.problems.length > 0&&isCommunity) {
                const areaItem = res.data.problems.find(p => p.problemType === '26' && p.problemResult)
                if (areaItem && areaItem.problemResult) {
                  try {
                    const areaIds = areaItem.problemResult.split(',')
                    // 从areaList中找到最后一个ID对应的名称
                    if (areaItem.areaList && areaItem.areaList.length > 0 && areaIds.length > 0) {
                      const lastAreaId = areaIds[areaIds.length - 1]
                      const findAreaName = (list, id) => {
                        for (let area of list) {
                          if (area.pkid === id) {
                            return area.areaName
                          }
                          if (area.children && area.children.length > 0) {
                            const found = findAreaName(area.children, id)
                            if (found) return found
                          }
                        }
                        return null
                      }
                      const areaName = findAreaName(areaItem.areaList, lastAreaId)
                      if (areaName) {
                        displayName = areaName
                      }
                    }
                  } catch (e) {
                    console.error('解析行政区划失败', e)
                  }
                }
              }
              
              this.editingItem = {
                pkid: pkid,
                name: displayName,
                status: 0,
              }

              this.$nextTick(() => {
                this.$refs.editFormRef.initForm(res.data.problems, false)
              })
            } else {
              this.$message.error(res.message || '获取楼栋详情失败')
            }
          })
          .catch((err) => {
            this.$message.error('获取楼栋详情失败')
          })
      // } else {
      //   queryQuestionById({
      //     templateId: templateId,
      //     pkid: pkid,
      //   })
      //     .then((res) => {
      //       console.log('res2------', res.data)
      //       if (res.success && res.data) {
      //         this.isEditing = true
      //         this.isDetailMode = false
      //         console.log('res.data.problems', res.data.problems)
      //         // this.editingItem = item

      //         this.$nextTick(() => {
      //           this.$refs.editFormRef.initForm(res.data.problems, true)
      //         })
      //         this.$emit('copy-all-building-ids', this.copyAllBuildingIds)
      //       } else {
      //         this.$message.error(res.message || '获取表单配置失败')
      //       }
      //     })
      //     .catch((err) => {
      //       this.$message.error('获取表单配置失败')
      //     })
      // }
    },

    // 清空draw-map-tool的绘制数据
    clearDrawMapToolData() {
      if (this.$refs.editFormRef && this.$refs.editFormRef.$refs.drawMapToolRef) {
        this.$refs.editFormRef.$refs.drawMapToolRef.clearAll()
      }
    },
  },
  mounted() {
    this.getCurrentLevel()
    this.getCityOptionList()
  },
}
</script>

<style lang="scss" scoped>
.catalog-detail-panel {
  position: absolute;
  left: 0;
  top: 0px;
  height: 100%;
  z-index: 1000;
  pointer-events: none;

  .panel {
    width: 400px;
    height: 100%;
    background: white;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    pointer-events: all;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid #e8e8e8;
      background: #f8f9fa;

      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-right: 10px;
      }

      .close-btn {
        cursor: pointer;
      }
    }

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .list-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .list-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
      }

      .header-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
        padding: 0 20px;
      }

      .search-box {
        padding: 16px 20px;
        border-bottom: 1px solid #e8e8e8;
        .select-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
        }
        .select-item {
          margin-right: 10px;
          &:last-child {
            margin-right: 0;
          }
        }
      }

      .data-list {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
        .data-item {
          display: flex;
          align-items: flex-start;
          padding: 12px 20px;
          transition: background-color 0.2s;
          border-bottom: 1px solid #f5f5f5;

          &:last-child {
            border-bottom: none;
          }

          .item-content {
            flex: 1;

            .item-row {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
            .item-title-desc {
              display: flex;
              flex-direction: column;
            }
            .item-status {
              margin-left: auto;
              margin-right: 10px;
              border-radius: 4px;
              padding: 2px 4px;
              background: #e6f3ff;
              color: #fff;
              font-size: 12px;
            }

            .item-title {
              width: 240px;
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 14px;
              font-weight: 500;
              color: #006fff;

              margin-bottom: 4px;
            }

            .item-desc {
              font-size: 12px;
              color: #666;
              line-height: 1.4;
            }
          }
        }
      }

      .pagination-container {
        padding: 16px 20px;
        border-top: 1px solid #f0f0f0;
        background: #fafafa;
        display: flex;
        justify-content: center;
        flex-shrink: 0;

        :deep(.el-pagination) {
          .el-pagination__total,
          .el-pagination__jump {
            display: none;
          }

          .btn-prev,
          .btn-next,
          .el-pager li {
            min-width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            margin: 0 2px;
          }

          .el-pager li.active {
            color: #409eff;
            background-color: #ecf5ff;
          }
        }
      }

      .empty-state {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999;
        min-height: 300px;

        .svg-icon {
          width: 48px;
          height: 48px;
          margin-bottom: 12px;
        }

        p {
          font-size: 14px;
          margin: 0;
        }
      }
    }
  }
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}
</style>
